简介
从perspective说起
perspective作为一个css样式，表示了从屏幕视角出发，与3D元素容器的距离。值越大，透过屏幕看过去，与3D元素距离越远。
浏览器坐标系
X轴正方向是水平向右
Y轴正方向是竖直向下
Z轴正方向是垂直屏幕向外
旋转和位移
transform可以对dom元素进行视觉层面的操纵，其中就包括旋转:Rotate。
transform: rotateY(180deg) translateZ(100px);
表示已Y轴为中心轴，顺时针旋转180度，并在旋转后的z轴方向前移100px
代码
<html>
<head>
<title>旋转立方体</title>
<link rel="stylesheet" type="text/css" href="./index.css" />
</head>
<body>
<div class="container">
<div class="cube">
<div class="cube-face front">前</div>
<div class="cube-face back">后</div>
<div class="cube-face top">上</div>
<div class="cube-face bottom">下</div>
<div class="cube-face left">左</div>
<div class="cube-face right">右</div>
</div>
</div>
</body>
</html>
body {
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
}
.container {
perspective: 400px;
width: 200px;
height: 200px;
position: relative;
}
.cube {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s;
animation: rotate 10s linear infinite;
}
@keyframes rotate {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.cube-face {
position: absolute;
width: 100%;
height: 100%;
color: #000;
background: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
.front {
transform: rotate(0) translateZ(100px);
}
.back {
transform: rotateY(180deg) translateZ(100px);
}
.top {
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}